<script setup lang="ts">
import { defineProps, PropType, computed, useSlots } from 'vue'
import { useStatusBar } from '@/hooks'
import { useNavBack } from '@/hooks/useNavBack'
enum TEXTALIGN {
    start,
    end,
    left,
    right,
    center,
    justify,
}
type TextAlign = keyof typeof TEXTALIGN

const $props = defineProps({
    icon: { type: String, default: 'arrow-left' },
    title: {
        type: String,
        default: '',
    },
    bgColor: {
        type: String,
        default: '#fff',
    },
    color: {
        type: String,
        default: '#000',
    },
    textAlign: { type: String as PropType<TextAlign>, default: 'center' },
    showBack: {
        type: Boolean,
        default: true,
    },
})
// 状态栏高度
let statusBarHeight = useStatusBar()
// eslint-disable-next-line no-undef
const pages = getCurrentPages()
const existTitleSlot = useSlots().title

const navBack = () => {
    useNavBack()
}
const isHome = computed(() => {
    return !pages[pages.length - 2]
})
</script>

<template>
    <view
        class="nav"
        :style="{
            height: `${statusBarHeight}px`,
            background: $props.bgColor,
            color: $props.color,
            textAlign: $props.textAlign,
        }"
    >
        <view class="nav__arrow" @click="navBack">
            <u-icon v-if="!isHome && $props.showBack" :name="$props.icon" size="36" />
        </view>
        <text v-if="!existTitleSlot">{{ $props.title }}</text>
        <slot v-else name="title"></slot>
    </view>
    <view :style="{ height: `${statusBarHeight}px` }"></view>
</template>

<style lang="scss" scoped>
@include b(nav) {
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    font-weight: 700;
    font-size: 30rpx;
    padding-bottom: 18rpx;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: #fff;
    z-index: 9999;
    @include e(arrow) {
        position: absolute;
        bottom: 24rpx;
        left: 4rpx;
        @include flex();
    }
}
@include b(right) {
    position: absolute;
    right: 35rpx;
    color: rgb(16, 16, 16) 100%;
    font-weight: normal;
    font-size: 28rpx;
    position: sticky;
}
</style>
